<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <link href="./css/pauseAnimation.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="module">
      const streamingFormat = new URL(window.location.href).searchParams.get('streamingFormat') ?? 'channelData'; // can be entity or channelData

      function addLivestreamingMetadata(activity, livestreamingMetadata) {
        return streamingFormat === 'entity'
          ? {
              ...activity,
              entities: [...(activity.entities ?? []), { ...livestreamingMetadata, type: 'streaminfo' }]
            }
          : {
              ...activity,
              channelData: { ...activity.channelData, ...livestreamingMetadata }
            };
      }

      run(async function () {
        const {
          React: { createElement },
          ReactDOM: { render },
          WebChat: {
            Components: { BasicWebChat, Composer },
            decorator: { WebChatDecorator }
          }
        } = window; // Imports in UMD fashion.

        const { directLine, store } = testHelpers.createDirectLineEmulator();

        const styleOptions = {
          typingAnimationBackgroundImage: `url('')`
        };

        render(
          createElement(
            WebChatDecorator,
            {},
            createElement(
              Composer,
              {
                directLine,
                store,
                styleOptions
              },
              createElement(BasicWebChat)
            )
          ),
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          from: {
            id: 'u-00001',
            name: 'Bot',
            role: 'bot'
          },
          text: 'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
        });

        const firstTypingActivityId = 't-00001';

        // WHEN: An informative message is received.
        await directLine.emulateIncomingActivity(
          addLivestreamingMetadata(
            {
              from: {
                id: 'u-00001',
                name: 'Bot',
                role: 'bot'
              },
              id: 't-00001',
              text: 'Nisi elit quis nisi consectetur.',
              type: 'typing'
            },
            { streamSequence: 1, streamType: 'informative' }
          )
        );

        // THEN: Should render the informative message.
        expect(pageElements.activityContents()[0]).toHaveProperty(
          'textContent',
          'Adipisicing cupidatat eu Lorem anim ut aute magna occaecat id cillum.'
        );
        expect(pageElements.activityContents()[1]).toHaveProperty('textContent', 'Nisi elit quis nisi consectetur.');

        await pageConditions.numActivitiesShown(2);
        await host.snapshot('local');
      });
    </script>
  </body>
</html>
